// 写一个tabs切换的组件
<template>
	<!-- tabbar切换页面 -->
	<div class="tabs">
			<!-- 第一个tabbar里面顶部的swiper滚动 -->
			<swiper class="swipers" ref="mySwiper" :options="swiperOptions">
					<swiper-slide ref="box"  class="list" v-for="(item,i) in list" :key="item.value">						
						<p @click="go(i)">{{item.name}}</p>					
					</swiper-slide>
                    <div class="line" ref="lines" :style="{transform:  `translate3d(${offsetLeft}px, 0, 0)`}">
                    </div>				
			</swiper>     
	</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name:'tabs',
  data:function(){
    return {
      swiperOptions: {
        // slidesPerView: 3,
        // spaceBetween: 30,
        slidesPerView: 'auto',
        touchMoveStopPropagation :true,
        freeMode: true,
        pagination: {
				  el: '.swiper-pagination',
				  clickable: true
        }
      },
      line:0,
      tt:[],
      offsetLeft:0,
      width:0
    }
  },
  props:{
    // tabbar列表
    list: {
      type: Array,
      default: true
    },
    active:{
      type:Number,
      default: true    
    }
  },
  watch: {
    active: {		
      handler(val) {
        this.go(val)
      }
    }
  },
  components: {		
		  Swiper,
		  SwiperSlide		
	  },
  created(){
        
  },
  computed:{
    swiper() {          
      return this.$refs.mySwiper.$swiper  
	    }
  },
  mounted(){
    console.log(this.$refs,'我打印下看看')
    this.width = this.swiper.width
    const pp = this.$refs.box
    this.tt = pp
    pp.forEach(item => {
      console.log(item.$el.offsetLeft,item.$el.swiperSlideSize,'哈哈')
    })
    this.line = this.$refs.lines.getBoundingClientRect().width
    this.go(0)
    //   this.$refs.box.forEach(res => {
    //       console.log(res,'气死你把')
    //   })
  },
  methods :{
    go(index){
      console.log(this.tt[index].$el.offsetLeft,'哈哈')
      // 移动到屏幕的正中心位置、
            
      // 设定位移，可以为正数(this.offsetLeft)

      console.log(this.tt[index].$el.getBoundingClientRect())
      const tt = (this.tt[index].$el.swiperSlideSize - this.line) / 2
      this.offsetLeft = this.tt[index].$el.offsetLeft + tt    
      // const  pp = this.tt[index].$el.offsetLeft+(this.width-this.tt[index].$el.getBoundingClientRect().width)/2
      var pp = this.tt[index].$el.offsetLeft - 375 / 3
      if (this.tt[index].$el.offsetLeft < 190){
			 	var pp = 0
      }	
      console.log(this.offsetLeft,pp,'哈哈')
      this.swiper.setTransition(600)
      this.swiper.setTranslate(-pp)  
      this.$emit('tabs',index) 
    }
  }
}
</script>
<style lang="less" scoped>
.tabs{
  z-index: 999;
}
.swipers{
    position: relative;
    z-index: 999;
    background: #ffffff;
    .swiper-wrapper{
        white-space: nowrap;
    }
    .list{
        width: auto;
        padding: 0px 30px;
        height: 90px;
        font-size: 28px;
        color: rgb(48, 49, 51);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .line{
        position: absolute;
        left: 0px;
        bottom: 0px;       
        width:84px;
        border-radius: 20px;
        transition: 0.3s linear;
        height: 6px;
        background: #FCCB30;
        border-radius: 0px;
    }
}
</style>
